<template>
  <div class="tab">
    <div class="topImg">
      <div class="top_img" v-for="(item, index) in tab3List" :key="index">
        <img :src="item.src" alt="" />
        <p class="p1">{{ item.p1 }}</p>
        <p>{{ item.p2 }}</p>
      </div>
    </div>

    <div class="bottom_img">
      <img src="../../../assets/img/home/home_3.png" alt="">
    </div>
  </div>
</template>
<script>
export default {
  name: "TabBar",
  data() {
    return {
      itemList: [
        '员工收入提升26%',
        'HR效率提高80%',
        '企业节省成本21%'
      ],
      tab3List: [
        {
          src:
            "https://www.guohuihr.cn/uploadfile/2020/1113/160525578527c78b.png",
          p1: "用非常之力",
          p2: "竞非常之功",
        },
        {
          src:
            "https://www.guohuihr.cn/uploadfile/2020/1113/16052557845bd4a5.png",
          p1: "免费提升学历",
          p2: "提升技能",
        },
        {
          src:
            "https://www.guohuihr.cn/uploadfile/2020/1113/1605255783b5aa4c.png",
          p1: "逐步构建起比较完整",
          p2: "的残疾人远程教育体系",
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.tab {
  margin-top: 30px;
  width: 100%;
  display: flex;
  flex-direction: column;
  .topImg {
    display: flex;
    .top_img {
      flex: 1;
      display: flex;
      flex-direction: column;

      img {
        width: 80%;
        margin: 0 auto;
      }
      .p1 {
        margin-top: 10px;
      }
      p {
        text-align: center;
      }
    }
  }

  .bottom_img {
    width: 100%;
    img {
      width: 100%;
    }
  }
}
</style>